<template>
  <div class="thesis-home-container">
    <!-- 用户个人信息板块 -->
    <el-row :gutter="20" class="user-info-section">
      <el-col :span="24">
        <el-card class="user-card">
          <div class="user-header">
            <div class="user-avatar">
              <img :src="userInfo.avatar || require('@/assets/images/profile.jpg')" alt="用户头像" />
            </div>
            <div class="user-details">
              <h2>{{ userInfo.nickName || userInfo.userName }}</h2>
              <p class="user-role">{{ userRoles.join(', ') }}</p>
              <p class="user-dept">{{ userDept }}</p>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-label">学号</span>
                  <span class="stat-value">{{ userInfo.studentId || '未填写' }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">专业</span>
                  <span class="stat-value">{{ userInfo.major || '未填写' }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">班级</span>
                  <span class="stat-value">{{ userInfo.className || '未填写' }}</span>
                </div>
              </div>
            </div>
            <div class="user-actions">
              <el-button type="primary" size="small" @click="editProfile">编辑资料</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 毕业论文基本信息展示区 -->
    <el-row :gutter="20" class="thesis-info-section">
      <el-col :span="24">
        <el-card class="thesis-card">
          <div slot="header" class="card-header">
            <span>毕业论文基本信息</span>
            <el-button type="text" @click="editThesisInfo">编辑</el-button>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="论文题目">{{ thesisInfo.title || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="指导教师">{{ thesisInfo.advisor || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="论文类型">{{ thesisInfo.type || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="研究领域">{{ thesisInfo.field || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ thesisInfo.startDate || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="预计完成时间">{{ thesisInfo.expectedEndDate || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="论文状态">
              <el-tag :type="getThesisStatusType(thesisInfo.status)">{{ getThesisStatusText(thesisInfo.status) }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="当前进度">
              <el-progress :percentage="thesisInfo.progress || 0" :color="customColor"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
          <div class="thesis-summary" v-if="thesisInfo.summary">
            <h4>论文摘要</h4>
            <p>{{ thesisInfo.summary }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 毕业论文成果详细介绍模块 -->
    <el-row :gutter="20" class="thesis-results-section">
      <el-col :span="24">
        <el-card class="results-card">
          <div slot="header" class="card-header">
            <span>毕业论文成果详细介绍</span>
            <el-button type="primary" size="small" @click="addResult">添加成果</el-button>
          </div>
          <el-tabs v-model="activeResultTab" @tab-click="handleResultTabClick">
            <el-tab-pane label="研究成果" name="research">
              <el-table :data="researchResults" style="width: 100%">
                <el-table-column prop="title" label="成果标题" width="200"></el-table-column>
                <el-table-column prop="type" label="类型" width="120">
                  <template slot-scope="scope">
                    <el-tag size="small">{{ getResultTypeText(scope.row.type) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="date" label="日期" width="120"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="viewResult(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deleteResult(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="发表论文" name="papers">
              <el-table :data="publishedPapers" style="width: 100%">
                <el-table-column prop="title" label="论文标题" width="250"></el-table-column>
                <el-table-column prop="journal" label="期刊/会议" width="200"></el-table-column>
                <el-table-column prop="authors" label="作者" width="150"></el-table-column>
                <el-table-column prop="publishDate" label="发表日期" width="120"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="viewPaper(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deletePaper(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="项目文档" name="documents">
              <el-table :data="documents" style="width: 100%">
                <el-table-column prop="title" label="文档名称" width="200"></el-table-column>
                <el-table-column prop="type" label="文档类型" width="120"></el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="uploadDate" label="上传日期" width="120"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="downloadDocument(scope.row)">下载</el-button>
                    <el-button size="mini" type="danger" @click="deleteDocument(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ThesisHome',
  data() {
    return {
      version: '2.0.0',
      userInfo: {
        avatar: '',
        nickName: '高竞鸿',
        userName: 'gaojinghong',
        studentId: '2021001',
        major: '计算机科学与技术',
        className: '计科1班',
        deptId: 1
      },
      userRoles: ['学生'],
      userDept: '计算机学院',
      thesisInfo: {
        title: '基于Vue.js的毕业论文管理系统设计与实现',
        advisor: '张教授',
        type: '毕业设计',
        field: 'Web应用开发',
        startDate: '2023-09-01',
        expectedEndDate: '2024-06-30',
        status: 'in_progress',
        progress: 65,
        summary: '本论文设计并实现了一个基于Vue.js和Spring Boot的毕业论文管理系统，旨在提高毕业论文管理的效率和便捷性。系统包含用户管理、论文信息管理、成果展示等功能模块。'
      },
      activeResultTab: 'research',
      researchResults: [
        {
          id: 1,
          title: '系统原型设计',
          type: 'prototype',
          description: '完成了毕业论文管理系统的界面设计和交互原型',
          date: '2023-10-15'
        },
        {
          id: 2,
          title: '数据库设计',
          type: 'database',
          description: '设计了系统的数据库结构，包括用户表、论文表、成果表等',
          date: '2023-11-10'
        },
        {
          id: 3,
          title: '前端框架搭建',
          type: 'frontend',
          description: '基于Vue.js和Element UI搭建了系统的前端框架',
          date: '2023-12-05'
        }
      ],
      publishedPapers: [
        {
          id: 1,
          title: '基于Vue.js的Web应用性能优化研究',
          journal: '计算机应用研究',
          authors: '高竞鸿, 张教授',
          publishDate: '2024-01-15'
        }
      ],
      documents: [
        {
          id: 1,
          title: '需求分析文档',
          type: '需求文档',
          description: '详细的系统需求分析文档，包含功能需求和非功能需求',
          uploadDate: '2023-09-15',
          fileUrl: '#'
        },
        {
          id: 2,
          title: '系统设计文档',
          type: '设计文档',
          description: '系统的详细设计文档，包含架构设计、数据库设计等',
          uploadDate: '2023-10-20',
          fileUrl: '#'
        }
      ],
      customColor: '#409EFF'
    }
  },
  methods: {
    getThesisStatusType(status) {
      const statusMap = {
        'not_started': 'info',
        'in_progress': 'primary',
        'submitted': 'warning',
        'reviewing': 'success',
        'completed': 'success',
        'rejected': 'danger'
      }
      return statusMap[status] || 'info'
    },
    getThesisStatusText(status) {
      const statusMap = {
        'not_started': '未开始',
        'in_progress': '进行中',
        'submitted': '已提交',
        'reviewing': '审核中',
        'completed': '已完成',
        'rejected': '已驳回'
      }
      return statusMap[status] || '未知状态'
    },
    getResultTypeText(type) {
      const typeMap = {
        'prototype': '原型设计',
        'database': '数据库设计',
        'frontend': '前端开发',
        'backend': '后端开发',
        'testing': '测试',
        'documentation': '文档'
      }
      return typeMap[type] || '其他'
    },
    editProfile() {
      this.$message('编辑个人资料功能待实现')
    },
    editThesisInfo() {
      this.$message('编辑论文信息功能待实现')
    },
    addResult() {
      this.$message('添加成果功能待实现')
    },
    handleResultTabClick(tab) {
      this.activeResultTab = tab.name
    },
    viewResult(result) {
      this.$message(`查看成果: ${result.title}`)
    },
    deleteResult(result) {
      this.$confirm('确定要删除该成果吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API删除成果
        const index = this.researchResults.findIndex(item => item.id === result.id)
        if (index > -1) {
          this.researchResults.splice(index, 1)
        }
        this.$message.success('删除成功')
      }).catch(() => {
        // 用户取消删除
      })
    },
    viewPaper(paper) {
      this.$message(`查看论文: ${paper.title}`)
    },
    deletePaper(paper) {
      this.$confirm('确定要删除该论文吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API删除论文
        const index = this.publishedPapers.findIndex(item => item.id === paper.id)
        if (index > -1) {
          this.publishedPapers.splice(index, 1)
        }
        this.$message.success('删除成功')
      }).catch(() => {
        // 用户取消删除
      })
    },
    downloadDocument(doc) {
      this.$message(`下载文档: ${doc.title}`)
    },
    deleteDocument(doc) {
      this.$confirm('确定要删除该文档吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API删除文档
        const index = this.documents.findIndex(item => item.id === doc.id)
        if (index > -1) {
          this.documents.splice(index, 1)
        }
        this.$message.success('删除成功')
      }).catch(() => {
        // 用户取消删除
      })
    }
  }
}
</script>

<style scoped>
.thesis-home-container {
  padding: 20px;
}

.user-info-section,
.thesis-info-section,
.thesis-results-section {
  margin-bottom: 20px;
}

.user-card .user-header {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 20px;
}

.user-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.user-details {
  flex: 1;
}

.user-details h2 {
  margin: 0 0 10px 0;
  font-size: 20px;
}

.user-role,
.user-dept {
  margin: 5px 0;
  color: #606266;
}

.user-stats {
  display: flex;
  margin-top: 10px;
}

.stat-item {
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.stat-value {
  font-size: 14px;
  color: #303133;
}

.user-actions {
  margin-left: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thesis-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.thesis-summary h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
}
</style>